<template>
  <!-- 饼环图 -->
  <div :style="{height:this.height+'px',width:'100%'}">
    <Row v-if="option.series.length===0" class="bg-fff" style="height:300px;" type="flex" align="middle" justify="center">
      <img src="@/assets/img/efficiencyAnalysis/zwsj.png" height="50%" />
    </Row>
    <div v-else ref="main" :style="{height:this.height+'px',width: '100%'}"></div>
  </div>
</template>

<script>
import { Style } from "./echartsStyle.js";
export default {
  props: {
    height: {
      type: Number,
      default: 300
    },
    viewData: {
      type: Object,
      default: null
    },
    unit: {
      type: String,
      default: ""
    },
    //标题组件位置
    lPositioning: {
      type: Object,
      default: () => {
        return {
          left: 20,
          top: 20
        };
      }
    },
    lItemGap: {
      type: Number,
      default: 20
    },
    iCon: {
      type: String,
      default: "circle"
    },
    legendWH: {
      type: Number,
      default: 10 //测试要求图例circle宽高10px
    },
    legendType: {
      type: String,
      default: "plain" //测试要求图例circle宽高10px
    },
  },
  components: {},
  data() {
    return {
      option: {
        series: []
      }
    };
  },
  computed: {},
  watch: {
    viewData(value) {
      if (value.sData) {
        this.option = {
          title: value.title,
          color: Style.color,
          grid:  value.grid?value.grid:({...Style.grid}),
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            textStyle: {
              rich: {
                orgname: {
                  fontSize: 14,
                  color: "#666",
                  width: 180
                },
                count: {
                  fontSize: 14,
                  color: "#666",
                  verticalAlign: "top",
                  align: "center",
                  padding: [0, 0, 0, 15]
                }
              }
            },
            type:this.legendType,
            orient: "vertical",
            ...this.lPositioning,
            icon: this.iCon,
            itemWidth: this.legendWH,
            itemHeight: this.legendWH,
            itemGap: this.lItemGap,
            data: value.lData != null ? value.lData : [],
            formatter: name => {
              if (value.sData != null) {
                var num = 0;
                if (value.sData instanceof Array) {
                  value.sData.map(obj => {
                    obj.data.map(item => {
                      if (
                        item.name.indexOf("总") < 0 &&
                        item.value &&
                        item.value != "-"
                      ) {
                        num += Number(item.value);
                      }
                    });
                  });
                  value.sData.map(obj => {
                    obj.data.map(item => {
                      if (item.name == name) {
                        name =
                          name +
                          " : " +
                          (item.value == "-"
                            ? "-"
                            : Number(item.value).toFixed(2) + this.unit);
                        num =
                          (item.value == "-" || item.value == 0
                            ? "-"
                            : ((item.value / num) * 100).toFixed(2)) + "%";
                      }
                    });
                  });
                } else {
                  value.sData.data.map(item => {
                    if (
                      item.name.indexOf("总") < 0 &&
                      item.value &&
                      item.value != "-"
                    ) {
                      num += Number(item.value);
                    }
                  });
                  value.sData.data.map(item => {
                    if (item.name == name) {
                      name =
                        name +
                        " : " +
                        (item.value == "-"
                          ? "-"
                          : Number(item.value).toFixed(2) + this.unit);
                      num =
                        (item.value == "-" || item.value == 0
                          ? "-"
                          : ((item.value / num) * 100).toFixed(2)) + "%";
                    }
                  });
                }
              }
              const arr = [`{orgname|${name}}`, `{count|${num}}`];
              return arr.join("");
            },
            pageIconSize:10
          },
          series: value.sData != null ? value.sData : []
        };
      }
      else {
        this.option = {
          color: Style.color,
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: "vertical",
            ...this.lPositioning,
            ...this.iCon,
            itemGap: this.lItemGap,
            data: []
          },
          series: []
        };
      }
      this.$nextTick(() => {
        let myChart = this.$echarts.init(this.$refs.main);
        myChart.setOption(this.option, true);
        myChart.resize();
      });
    }
  },
  methods: {},
  created() {},
  mounted() {
    setTimeout(()=>{
      window.addEventListener("resize", () => {
        setTimeout(() => {
          let myChart = this.$echarts.init(this.$refs.main);
          myChart.resize();
        }, 500);
      });
    },500)
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
